import { SPACE } from '@/constants/themeConstant.js';
import { Flex, Tooltip } from 'antd';
import { getName } from '@/pages/FileManage/fun.js';
import FileUtil from '@/utils/file.js';
import styled from 'styled-components';
import FileImage from '@/pages/FileManage/widget/FileImage/index.jsx';

const FileTitleDiv = styled.div`
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: var(${'--ant-color-primary'});
`;

const FileTimeDiv = styled.div`
  font-size: 12px;
  display: flex;
  justify-content: center;
  color: rgba(0, 0, 0, 0.4);
`;

const FileSizeDiv = styled.div`
  font-size: 12px;
  display: flex;
  justify-content: center;
  color: #6c6c6c;
`;

/**
 * 文件项
 * @param props 属性
 * @param props.data 资源信息
 */
export default function FileItem(props) {
  const { data } = props;

  return (
    <Flex vertical justify="space-between" gap={10} style={{ height: '100%', padding: SPACE }}>
      <div
        style={{
          display: 'flex',
          justifyContent: 'center'
        }}
      >
        <FileImage data={data} />
      </div>
      <Tooltip title={getName(data)}>
        <FileTitleDiv>{getName(data)}</FileTitleDiv>
      </Tooltip>
      <FileTimeDiv>{data?.createTime}</FileTimeDiv>
      <FileSizeDiv>{FileUtil.formatFileSize(data?.size)}</FileSizeDiv>
    </Flex>
  );
}
